<template>
  <div class="classifyChild">
    <div class="c-banner">
      <div class="c-title">
        <img src="../../../public/images/logo.svg" alt="" />
      </div>
      <div class="c-banner-bot">
         <router-link
        to="/search"
        custom
        v-slot="{ href, route, navigate, isActive, isExactActive }"
      >
        <div class="c-search" @click="navigate">
          <img
            src="../../../public/images/classify/classify-search.svg"
            alt=""
          />
        </div>
        </router-link> 
      </div>
    </div>
    <div class="classifyChildCon">
      <div class="cc-title">
        <h2 class="h2titleBigs">{{ category.name }}</h2>
        <p class="cc-num">
          <span>{{ productCount }}</span
          >个结果
        </p>
      </div>
      <div class="cc-choose">
        <van-tabs @click="chooseTeam">
          <van-tab title="全部" color="transparent" :name="this.firstId"></van-tab>
          <van-tab
            v-for="item in filtersCat"
            :name="item.id"
            :title="item.name"
          ></van-tab>
        </van-tabs>
      </div>
      <van-dropdown-menu active-color="#0058a3">
        <van-dropdown-item v-model="value1" :options="option1"  @change='onConfirm'/>
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
      </van-dropdown-menu>
    </div>
    <div class="cc-goodsCard">
      <ul>
        <li>
          <ul>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              offset="20"
            >
              <router-link :to="{path:`/classify/goodsinfo/${item.id}`,query:{type:`${item.itemType}`}}" v-for="(item, index) in finalDataList" v-if="index % 2 === 0">
                <goods-info-link>
                <div class="cc-img">
                  <img :src="item.image" alt="" />
                </div>
                <div class="cc-price">
                  <h3 class="lowerPrice" v-if="item.priceDisplay.tags[0]">
                    {{ item.priceDisplay.tags[0].name }}
                  </h3>
                  <h3>{{ item.name }}</h3>
                  <h4>{{ item.fullDescription }}</h4>
                  <div class="sallDate" v-if="item.price.validFromDate">
                    <h4>优惠有效期</h4>
                    <h4>
                      {{ item.price.validFromDate }}-{{
                        item.price.validToDate
                      }}
                    </h4>
                  </div>
                  <div
                    class="priceText"
                    :class="{ breathTaking: item.price.breathTaking }"
                  >
                    <span class="price-min">￥</span>
                    <!-- <span class="price-max">{{item.priceNumeral>1000?parseInt(item.priceNumeral/1000)+','+(item.priceNumeral%1000<100?'0'+item.priceNumeral%1000:item.priceNumeral%1000<10?'00'+item.priceNumeral%1000:item.priceNumeral%1000):item.priceNumeral}}</span> -->
                    <span class="price-max">{{
                      (item.price.specialPrice
                        ? item.price.specialPrice
                        : item.price.regularPrice
                      )
                        .toFixed(2)
                        .toString()
                        .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
                        .split(".")[0]
                    }}</span>
                    <span class="price-min"
                      >.{{
                        (item.price.specialPrice
                          ? item.price.specialPrice
                          : item.price.regularPrice
                        )
                          .toFixed(2)
                          .toString()
                          .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
                          .split(".")[1]
                      }}</span
                    >
                    <s v-if="item.price.specialPrice"
                      >￥{{
                        item.price.regularPrice
                          .toFixed(2)
                          .toString()
                          .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
                      }}</s
                    >
                  </div>
                </div>
                </goods-info-link>
              </router-link>
            </van-list>
          </ul>
        </li>
        <li>
          <ul>
             <router-link :to="{path:`/classify/goodsinfo/${item.id}`,query:{type:`${item.itemType}`}}" v-for="(item, index) in finalDataList" v-if="index % 2 !== 0">
                <goods-info-link>
                <div class="cc-img">
                  <img :src="item.image" alt="" />
                </div>
                <div class="cc-price">
                  <h3 class="lowerPrice" v-if="item.priceDisplay.tags[0]">
                    {{ item.priceDisplay.tags[0].name }}
                  </h3>
                  <h3>{{ item.name }}</h3>
                  <h4>{{ item.fullDescription }}</h4>
                  <div class="sallDate" v-if="item.price.validFromDate">
                    <h4>优惠有效期</h4>
                    <h4>
                      {{ item.price.validFromDate }}-{{
                        item.price.validToDate
                      }}
                    </h4>
                  </div>
                  <div
                    class="priceText"
                    :class="{ breathTaking: item.price.breathTaking }"
                  >
                    <span class="price-min">￥</span>
                    <!-- <span class="price-max">{{item.priceNumeral>1000?parseInt(item.priceNumeral/1000)+','+(item.priceNumeral%1000<100?'0'+item.priceNumeral%1000:item.priceNumeral%1000<10?'00'+item.priceNumeral%1000:item.priceNumeral%1000):item.priceNumeral}}</span> -->
                    <span class="price-max">{{
                      (item.price.specialPrice
                        ? item.price.specialPrice
                        : item.price.regularPrice
                      )
                        .toFixed(2)
                        .toString()
                        .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
                        .split(".")[0]
                    }}</span>
                    <span class="price-min"
                      >.{{
                        (item.price.specialPrice
                          ? item.price.specialPrice
                          : item.price.regularPrice
                        )
                          .toFixed(2)
                          .toString()
                          .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
                          .split(".")[1]
                      }}</span
                    >
                    <s v-if="item.price.specialPrice"
                      >￥{{
                        item.price.regularPrice
                          .toFixed(2)
                          .toString()
                          .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
                      }}</s
                    >
                  </div>
                </div>
                </goods-info-link>
              </router-link>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { List, Tab, Tabs, DropdownMenu, DropdownItem } from "vant";
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
import axios from "axios";
import GoodsInfoLink from '../../components/GoodsInfoLink.vue';
export default {
  components: {GoodsInfoLink},
  data() {
    return {
      dataList: [],
      finalDataList: [],
      category: [],
      filters2: [],
      plannerCount: [],
      plannerWindow: [],
      productCount: [],
      productWindow: [],
      sortOrders: [],
      filtersCat: [],
      id: "",
      idlist: "",
      list: [],
      loading: true,
      finished: false,
      moreproductWindow: [],
      index: 1,
      start: 10,
      end: 20,
      isfirst: 0,
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      switch1: false,
      switch2: false,
      rule:'',
      firstId:'',
      option1: [
        { text: '推荐排序', value: 0 },
        { text: '低价优先', value: 1 },
        { text: '高价优先', value: 2 },
      ],
      option2: [
        { text: '颜色', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option3: [
        { text: '商品分类', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option4: [
        { text: '筛选', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
    };
  },
  //计算属性 依赖缓存,多对一(即多个影响一个),不支持异步
  computed: {},
  //监控data中的数据变化,不依赖缓存,一对多,支持异步
  watch: {},
  //方法集合
  methods: {
    async onConfirm(value) {
      switch(value){
        case 0:
          this.rule="&sort=RELEVANCE";
          break;
        case 1:
          this.rule="&sort=PRICE_LOW_TO_HIGH";
          break;
        case 2:
          this.rule="&sort=PRICE_HIGH_TO_LOW";
          break;
          default:console.log("error");
      }
      this.finalDataList = [];
      await this.onLoadData();
    },
    async chooseTeam(name) {
      this.$router.replace(name);
      this.finalDataList = [];
      await this.onLoadData();
    },
    async onLoad() {
      this.loading = true;
      this.index++;
      this.start = 10 * this.index;
      this.end = this.start + 10;
      await this.moreLoadData();
      this.loading = false;
    },
    async moreLoadData() {
      let list = await axios.get(
        `/api-search/cn/zh/product-list-page/more-products?c=cnweb&v=20210322${this.rule}&start=${this.start}&category=${this.id}&end=${this.end}`
      );
      this.dataList = list.data.moreProducts;
      if (this.dataList.productWindow.length < 10) this.finished = true;
      this.moreproductWindow = this.dataList.productWindow;
      this.idlist = this.moreproductWindow.reduce((value, item) => {
        value += "ids=" + item.id + "&";
        return value;
      }, "");
      await this.loadFinallData();
    },
    //首次获取数据
    async onLoadData() {
      this.id = this.$route.params.id;
      let list = await axios.get(
        `/api-search/cn/zh/product-list-page?c=cnweb&v=20210322&size=10${this.rule}&category=${this.id}`
      );
      this.dataList = list.data.productListPage;
      (this.category = this.dataList.category),
        (this.filters2 = this.dataList.filters2),
        (this.plannerCount = this.dataList.plannerCount),
        (this.plannerWindow = this.dataList.plannerWindow),
        (this.productCount = this.dataList.productCount),
        (this.productWindow = this.dataList.productWindow),
        (this.sortOrders = this.dataList.sortOrders.values);
      if (this.isfirst === 0) {
        this.filtersCat = this.filters2[0].values;
        this.firstId=this.category.key;
        this.isfirst++;
      }

      this.idlist = this.productWindow.reduce((value, item) => {
        value += "ids=" + item.id + "&";
        return value;
      }, "");
      await this.loadFinallData();
      // console.log(this.finalDataList);
    },
    async loadFinallData() {
      let finalList = await axios.get(
        `/api-host/content/products?${this.idlist}lang=zh`,
        {
          headers: {
            "x-client-platform": "MobileWeb",
          },
        }
      );
      this.finalDataList = this.finalDataList.concat(finalList.data);
    },
    handler(component) {
      console.log("this component is showing");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    this.id = this.$route.params.id;
    await this.onLoadData();
    this.loading = false;
    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  async beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='stylus' scoped>
.classifyChild {
  position: relative;
  z-index: 2;
  height: 100vh;
  overflow-Y: scroll;
  background-color #fff
  .c-banner {
    width: 100%;
    height: 1.72rem;
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0.19rem 0 0.3rem;
    background: url('../../../public/images/classify/classifychildbanner.jpeg') no-repeat 0 0;
    background-size: 100% 100%;

    .c-title {
      height: 0.2rem;
      width: 100%;
    }

    .c-banner-bot {
      .c-banner-title {
        color: #FFF;
        font-size: 0.24rem;
        font-weight: 600;
        line-height: 0.34rem;
      }
    }
  }

  .classifyChildCon {
    padding: 0 0.13rem;
    position:sticky;
    top:0;
    z-index:99;
    background-color #fff
    .cc-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .h2titleBigs {
        font-size: 0.2rem;
        line-height: 0.5rem;

        .cc-num {
          font-size: 0.12rem;
          color: #767676;
          white-space: nowrap;
          font-weight: normal;
        }
      }
    }

    .chooseFilter {
      ul {
        display: flex;
        justify-content: space-between;

        li {
          flex: 1 0 0%;
          height: 0.4rem;
          line-height: 0.4rem;
          padding-left: 0.13rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666;

          span {
            font-size: 0.12rem;
            margin-right: 0.06rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 0.6rem;
            font-weight: 400;
          }
        }
      }
    }
  }

  .cc-goodsCard {
    padding: 0.1rem;
    background-color: #f5f5f5;

    &>ul {
      // height: 100vh;
      // overflow-Y: scroll;
      display: flex;
      justify-content: space-between;

      &>li {
        width: 1.725rem;

        ul {
          li {
            margin-bottom: 0.1rem;
            border-radius: 0.05rem;
            background-color: #fff;

            .cc-img {
              height: 1.64rem;
              position: relative;

              img {
                width: 1.26rem;
                height: 1.26rem;
                position: absolute;
                top: calc(50% - 0.63rem);
                left: calc(50% - 0.63rem);
              }
            }

            .cc-price {
              margin-top: 0.1rem;
              padding: 0.1rem;

              .lowerPrice {
                margin-bottom: 0.06rem;
                color: #E42312;
              }

              h3 {
                line-height: 0.16rem;
                color: #111;
                font-weight: 700;
                font-size: 0.12rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
              }

              h4 {
                margin-top: 0.05rem;
                color: #666;
                opacity: 0.68;
                font-size: 0.12rem;
                line-height: 0.16rem;
                height: auto;
                word-break: break-word;
                white-space: normal;
                margin-bottom: 0.15rem;
                font-weight: normal;
              }

              .sallDate {
                h4 {
                  margin-top: 0;
                  line-height: 0.01rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="stylus">
.van-dropdown-menu__bar{
  box-shadow transparent 0 0 0 0;
  .van-ellipsis{
    font-size: 0.12rem;
    color: #666;
  }
}
.cc-choose {
  .van-tabs__line {
    background-color: transparent;
  }

  .van-tab {
    padding: 0 0.14rem;
    background: #f5f5f5;
    border-radius: 0.24rem;
    color: #111;
    font-size: 0.12rem;
    line-height: 0.3rem;
    height: 0.3rem;
    margin-right: 0.1rem;
  }

  .van-tab--active {
    background-color: #111;
    color: #fff;
  }
}

.van-list__finished-text, .van-list__loading {
  position: relative;
  left: 0.85rem;
  top: 0.15rem;
}
.van-cell__title{
  font-size:.14rem;
  padding-left 0.16rem
}
</style>